<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
  </head>
  <body>
    <p id="labelInfo1" style="float:right"></p>
    <p id="labelInfo2" style="float:left"></p>
    <!-- <button id="demo" style="float:left">geolocation</button> -->
    <div id="map" style="height:700px;width:1000px;position:absolute;top:80px;"></div>
    <script>
        $(function(){
            var markerLayer;
            var map = L.map('map',
            {
            crs: L.CRS.EPSG4326,
            zoomControl: true,
            editable:true
            }).setView([39.093121115112305,117.20310592346191], 13);
            //将图层加载到地图上，并设置最大的聚焦还有map样式
            //添加电子地图影像
            var  vector_map=L.tileLayer("https://t{s}.tianditu.gov.cn/vec_c/wmts?layer=vec&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=93724b915d1898d946ca7dc7b765dda5", {
                subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"],
                maxZoom: 17,
                tileSize: 256,
                zoomOffset: 1,
                minZoom: 3
            }).addTo(map);
            //添加注记
            var vector_note=L.tileLayer("https://t{s}.tianditu.gov.cn/cva_c/wmts?layer=cva&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=93724b915d1898d946ca7dc7b765dda5", {
                subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"],
                maxZoom: 17,
                tileSize: 256,
                zoomOffset: 1,
                zIndex:5,
                minZoom: 3
            }).addTo(map);
            map.on("click",(e)=>{
                if(markerLayer){
                    map.removeLayer(markerLayer);
                }
                //console.log(e.latlng);
                markerLayer = L.marker([e.latlng.lat,e.latlng.lng]).addTo(map);
                //console.log(e.latlng.toString());
                document.getElementById("labelInfo1").innerHTML=e.latlng.lat+","+e.latlng.lng;
                
            });
            map.on("mousemove",(e)=>{
                // if(markerLayer){
                //     map.removeLayer(markerLayer);
                // }
                document.getElementById("labelInfo2").innerHTML=e.latlng.lat+","+e.latlng.lng;
            });
            $("#demo").click(function(e){
                if(navigator.geolocation){
                    navigator.geolocation.getCurrentPosition(function(e){
                        var lo = e.coords.longitude;
                        var la = e.coords.latitude;
                        console.log(lo,la)
                        alert(lo)
                    },function(error){console.log(error)})
                }else{
                    alert("不支持定位服务")
                }
            })
        });
    </script>
  </body>
</html>